<template>
  <view class="package space-between">
    <view class="direction-start">
      <view>工作状态</view>
      <view style="color:#1D8DFF;margin-top:10rpx;font-size: 26rpx;">时长：00:00:00</view>
    </view>
    <view class="center" @click="openPop()">
      <view style="width:350rpx;text-align: right;">休息中</view>
      <image src="../../../static/index/down.png" mode="" style="width: 22px;height: 22px;margin:10rpx 0px 0px 10rpx">
      </image>
    </view>
  </view>
  <!-- 加注机列表 -->
  <uni-popup ref="popup" type="bottom" style="z-index: 910">
    <scroll-view scroll-y="true" enable-back-to-top class="scroll-box">
      <view class="space-between list" v-for="item in 10">
        <view>移动车二号机<text>（胡亚峰）</text></view>
        <view class="but">使用中</view>
      </view>
    </scroll-view>
  </uni-popup>
  <!-- 选中 -->
  <uni-popup ref="Selected" type="center" style="z-index: 910">
    <view class="package column fill">
      <view>加注机一号机</view>
      <view style="margin:20rpx 0px;">正在被胡亚峰使用是否继续上机</view>
      <view class="center bnt">
        <view>取消</view>
        <view>确定</view>
      </view>
    </view>
  </uni-popup>
  <!-- 切换 -->
  <uni-popup ref="switchCut" type="center" style="z-index: 910">
    <view class="package column fill">
      <view style="margin-bottom: 30rpx;">加注机一号机</view>
      <view class="center bnt">
        <view>下机</view>
        <view>切换</view>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  // 加注机列表
  const popup = ref(null)
  // 选中
  const Selected = ref(null)
  // 切换
  const switchCut = ref(null)
  // 加注机列表
  function openPop() {
    popup.value.open()
  }
  // 选中
  function selectPop() {
    Selected.value.open()
  }
  function switchPop() {
    switchCut.value.open()
  }
</script>
<style scoped lang="less">
  .scroll-box {
    width: 100%;
    height: 600rpx;
    background-color: #fff;
    padding: 30rpx 30rpx 0px;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0px 0px;

    .list {
      padding: 20rpx 0px;
      box-sizing: border-box;

      .but {
        width: 162rpx;
        height: 52rpx;
        border: 1px solid #666666;
        border-radius: 26px;
        text-align: center;
        line-height: 52rpx;
      }
    }
  }

  .fill {
    width: 600rpx;
    border-radius: 5px;
    padding: 30rpx 20rpx 50rpx;
    box-sizing: border-box;

    .bnt {
      width: 100%;
      justify-content: space-around;
      margin-top: 20rpx;

      view {
        width: 245rpx;
        height: 68rpx;
        border: 1px solid #2694FB;
        border-radius: 35px;
        text-align: center;
        line-height: 68rpx;
        color: #fff;
        box-sizing: border-box;
      }

      view:nth-of-type(1) {
        color: #2694FB;
      }

      view:nth-of-type(2) {
        background: #2694FB;
      }
    }
  }
</style>